
Vue.createApp({
    // 定义组件
    components:{
        'horizontal-nav': HORIZONTAL_NAV,
        'left-nav': LEFT_NAV,
        'my-article': ARTICLE,
    },
    // 初始化
    setup(){
        // reactive定义变量运行存储
        // toRefs将数据返回
        const {
            reactive, toRefs
        } = Vue
        // 定义变量，即所需数据
        const state = reactive({
            articles: [],
            user: {},
            loginUser: {},
            isFollow: false,
            menu:[
                {
                    name: "文章",
                },
                {
                    name: "动态",
                },
                {
                    name: "喜欢",
                },
            ],
            href:[
                "/userArticle",
                "/dynamic",
                "/likeArticle"
            ],
            html: ""
        })
        let that = state
        let href = location.href.split("/")
        let userId = href[href.length - 1]
        // 获取登录信息
        get("/loginUser", function (data) {
            that.loginUser = data
        })
        // 获取用户
        get("/getUserById/" + userId, function (data) {
            that.user = data
            let profile = '欢迎光临，我的快乐~'
            if (that.user.profile != "") {
                profile = that.user.profile
            }
            replaceHtml("#userDetail #profile .description", profile)
        })
        // 获取关注状态
        get("/isFollow/" + userId, function (data) {
            that.isFollow = data
        })
        // 初始化为用户文章页
        get(that.href[0], null, function(data){
            replaceHtml("#userDetail #main", data.responseText)
        })
        switchClass("#userDetail #nav ul>li", "#userDetail #main", that.href)

        // 返回数据
        return {
            ...toRefs(state)
        }
    },
    methods: {
        follow: function (userId) {
            if (this.loginUser.userId == userId) {
                swalError("关注失败", "不能关注您自己")
                return
            }
            let that = this
            if (!that.isFollow) {
                get("/follow/" + userId)
                that.isFollow = true
                swalSuccess("关注成功", "该作者发表文章后会第一时间通知您")
            } else {
                this.unFollow(userId)
            }
        },
        unFollow(userId) {
            let that = this
            get("/unFollow/" + userId)
            that.isFollow = false
            swalError("取关成功", "该作者发表文章后您将无法收到通知")
        
        }
    }
    // 绑定app
}).mount("#userDetail")